<template>
    <div>
         <el-col :span="24"><div class="grid-content login_content">
                <el-form :inline="true" :model="formInline" :rules="rules2" class="demo-form-inline">
                    <el-form-item label="工号" prop="id" class="input">
                        <el-input  v-model="formInline.id" placeholder="工号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="Pw" class="input">
                        <el-input  v-model="formInline.Pw" placeholder="密码"></el-input>
                    </el-form-item>
                </el-form> 
        </div></el-col>
       <el-col :span="20"><div class="grid-content submit">  
            <input type="checkbox" class="check">下次自动登录
       </div></el-col>
       <el-col :span="4"><div class="grid-content submit">
            <el-button type="primary" size="small" @click="loginTest">登录</el-button>
       </div></el-col>
       <el-col :span="20"><div class="grid-content forget"></div></el-col>
       <el-col :span="4"><div class="grid-content forget">
            <a>忘记密码</a> 
       </div></el-col>
    </div>
</template>
<script>
import axios from 'axios'
    export default {
        data() {
            var checkId = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                }
                else{
                        if(value.length!==4||isNaN(Number(value))){
                        callback(new Error('您输入的用户名不符'));
                        }
                    callback();
                }
            };
            return {
                 formInline:{
                    id: '', 
                    Pw: ''
                 } ,                   
                rules2: {
                    id:[
                        {validator: checkId, trigger: 'blur'}
                    ]
                }   
            }
        },
        methods: {
             onSubmit() {
                 console.log('submit!');
             },
             myRouter(path) {
                this.$router.push(path)
            },
             loginTest: function(){
                 var params = new URLSearchParams();
                params.append('id',this.formInline.id );
                params.append('Pw',this.formInline.Pw );
                console.log(this.formInline.id);
                console.log(this.formInline.Pw);
                var _this = this
                
                axios.post('/users/login_teacher',params).then(function (res) {
                    if(res.data.result==0) {
                       alert('用户不存在')
                   }else if(res.data.result==1){
                        alert('成功')
                        console.log(res.data);
                       // _this.changeBtn();
                        _this.$router.push({path:'/teacher'})  //,query:{user:res.data.user,id:res.data.id}
                   }else {
                        alert('密码错了')
                   }

                }).catch(function (err) {
                    console.log(err);
                })

        }

        }
       
    }
</script>
<style>
 .login_content{
        float:left;
        margin-top: 5%;
        /*border: 1px solid #000;*/
    }
    .input{
        width: 180px;
    }
     .forget{
        font-size: 12px;
    }
    .el-row {
            margin-bottom: 20px;
            &:last-child {
            margin-bottom: 0;
            }
        }
    .el-col {
            border-radius: 4px;
        }
    .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
    .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
</style>

